<template>
  <div class="box1">
    <div>
      <Heaed
        title="订单结算"
        :left="true"
        :iconbool="false"
        @back="fun1"
      ></Heaed>
    </div>
    <img class="img1" src="../../img/首页/u19.png" alt="" />
    <div class="box">
      <OrderListContent></OrderListContent>
    </div>
    <div class="footer">
      <p class="p1"><span></span>&nbsp;&nbsp; 配送详情</p>
      <p class="p2">配送物流: <span>OMINI物流</span></p>
      <p class="p3">当前状态: <span>配送员（OMINI）配送中</span></p>
      <span class="xq" @click="fu">详情</span>
    </div>
    <div class="footer">
      <p class="p1"><span></span>&nbsp;&nbsp; 收货人详情</p>
      <p class="p2 p22">取货人: <span>OMINI.BASS</span></p>
      <p class="p3 p33">联系电话：<span>18801525595</span></p>
      <p class="p44">备注： <span>需要包装盒，谢谢！</span></p>
      
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
// 引入头部
import Heaed from "../../components/Hand.vue";
// 引入头部内容
import OrderListContent from "./Mycomponents/OrderListContent.vue";
const router = useRouter();
const fun1 = () => {
  router.go(-1);
};
const fu = () =>{
  router.push("/Delivery")
}
</script>

<style lang="less" scoped>
.img1{
  position: relative;
  top: -60px;
}
.box1 {
  width: 100vw;
  height: 100vh;
  background-color: #ecfdfa;
  overflow: auto;
  position: relative;
}
.box {
  background-color: #fff;
  position: absolute;
  top: 37px;
  left: 2px;
}
.footer {
  width: 90vw;
  margin: 0 auto;
  border-radius: 20px;
  background-color: #fff;
  position: relative;
  top: 0px;
  font-weight: 600;
  text-indent: 30px;
  .p1{
    margin: 10px 0px;    
    span{
        width: 1vw;
        height: 3vh;
        background-color: red;
        display: inline-block;
        border-radius: 2px;
        position: relative;
        top: 4px;
        
    }
  }
  .p2{
    margin:20px 0px;
    span{
        font-weight: 200;
        font-size: 12px;
        margin-left: 20px;
    }
  }
  .p22{
    span{
        margin-left: 35px;
    }
  }
  .p3{
    span{
        font-weight: 200;
        font-size: 12px;
        margin-left: 20px;
        
    }
  }
  .p33{
    margin-bottom: 10px;
    span{
        margin-left: 12px;
    }
  }
}
.xq{
    font-size: 12px;
    font-weight: 200;
    color: #CCCCCC;
    position: relative;
    right: -77.667vw;
    top: -19px;
}
.p44{
    margin: 10px 0px;
    padding-bottom: 10px;
    span{
        font-size: 12px;
        font-weight: 200;
        margin-left: 40px;
        
    }
}
</style>
